<template>
  <div class="app-container">

    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search" />
        <span>筛选搜索</span>
        <el-button
          style="float:right"
          type="primary"
          size="small"
          @click="handleSearch()"
        >
          查询搜索
        </el-button>
        <el-button
          style="float:right;margin-right: 15px"
          size="small"
          @click="handleResetSearch()"
        >
          重置
        </el-button>
      </div>

      <div style="margin-top: 15px">
        <el-form :inline="true" :model="temp2" size="small" label-width="140px">
          <el-form-item label="输入搜索：">
            <el-input v-model="temp2.order" class="input-width" placeholder="订单编号" />
          </el-form-item>
          <el-form-item label="收货人：">
            <el-input v-model="temp2.account" class="input-width" placeholder="用户账号" />
          </el-form-item>
          <el-form-item label="提交时间：">
            <el-date-picker
              v-model="temp2.create_time"
              class="input-width"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="请选择时间"
            />
          </el-form-item>
          <el-form-item label="订单状态：">
            <el-select v-model="temp2.order_status" class="input-width" placeholder="全部" clearable>
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="订单支付方式分类：">
            <el-select v-model="temp2.payment" class="input-width" placeholder="全部" clearable>
              <el-option
                v-for="item in orderTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="订单来源：">
            <el-select v-model="temp2.order_source" class="input-width" placeholder="全部" clearable>
              <el-option
                v-for="item in sourceTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <div class="filter-container">
      <el-button type="primary" @click="handleCreate()">created</el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="编号">
        <template slot-scope="scope">
          <!-- {{ scope.$index }} -->
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单编号">
        <template slot-scope="scope">
          {{ scope.row.order }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="提交时间">
        <template slot-scope="scope">
          {{ scope.row.create_time }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="用户账号">
        <template slot-scope="scope">
          {{ scope.row.account }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单金额">
        <template slot-scope="scope">
          {{ scope.row.money }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="支付方式">
        <template slot-scope="scope">
          {{ scope.row.payment }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单来源">
        <template slot-scope="scope">
          {{ scope.row.order_source }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单状态">
        <template slot-scope="scope">
          {{ scope.row.order_status }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="Action">
        <template slot-scope=" scope ">
          <el-button type="primary" size="mini" @click="lookOrder(scope.$index, scope.row)">查看订单</el-button>
          <el-button type="primary" size="mini" @click="handleDelete(scope.row,scope.$index)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--Edit dialog-->
    <el-dialog :visible.sync="dialogVisible">
      <el-form ref="dataForm" :model="temp" :rules="rules">
        <el-form-item label="Order" prop="order">
          <el-input v-model="temp.order" />
        </el-form-item>
        <el-form-item label="Create_time" prop="create_time">
          <el-input v-model="temp.create_time" />
        </el-form-item>
        <el-form-item label="Account" prop="account">
          <el-input v-model="temp.account" />
        </el-form-item>
        <el-form-item label="Money" prop="money">
          <el-input v-model="temp.money" />
        </el-form-item>
        <el-form-item label="Payment" prop="payment">
          <el-input v-model="temp.payment" />
        </el-form-item>
        <el-form-item label="Order_source" prop="order_source">
          <el-input v-model="temp.order_source" />
        </el-form-item>
        <el-form-item label="Order_status" prop="order_status">
          <el-input v-model="temp.order_status" />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogStatus === 'create' ? createData() : updateData()">Confirm</el-button>
        <el-button @click="dialogVisible = false">Cancelg</el-button>
      </div>

    </el-dialog>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
  </div>
</template>
<script>
import { getOrderList } from '@/api/order'
import Pagination from '@/components/Pagination'
// npm install -S file-saver xlsx
// npm install -D script-loader

export default {
  components: { Pagination },

  data() {
    return {
      list: null,
      listLoading: false,
      exportLoading: false,
      // show eidt dialog？
      dialogVisible: false,
      temp: {
        order: '',
        create_time: '',
        account: '',
        money: '',
        payment: '',
        order_source: '',
        order_status: ''
      },
      // create or edit
      dialogStatus: '',
      // 分页，pageSizes[10, 20, 30, 50]
      total: 0,
      listQuery: {
        page: 1,
        limit: 20,
        order: undefined

      },
      // 表单验证
      rules: {
        account: [{ required: true, message: 'account name is required', trigger: 'blur' }],
        xh: [
          { required: true, message: 'xh is required', trigger: 'blur' },
          { min: 8, max: 8, message: 'length of xh should be 8', trigger: 'blur' }
        ],
        email: [{ type: 'email', required: true, message: 'please check your email address', trigerr: 'blur' }],
        phone: [{ required: true, message: 'phone number is required', trigerr: 'blur' }],
        address: [{ required: true, message: 'address is required', trigerr: 'blur' }]
      },

      temp2: Object.assign({}, this.temp),
      statusOptions: [
        {
          label: '已关闭',
          value: '已关闭'
        },
        {
          label: '待发货',
          value: '待发货'
        },
        {
          label: '已发货',
          value: '已发货'
        },
        {
          label: '已完成',
          value: '已完成'
        }
      ],
      orderTypeOptions: [
        {
          label: '未支付',
          value: '未支付'
        },
        {
          label: '支付宝',
          value: '支付宝'
        },
        {
          label: '微信',
          value: '微信'
        }
      ],
      sourceTypeOptions: [
        {
          label: 'APP订单',
          value: 'APP订单'
        },
        {
          label: 'WEB订单',
          value: 'WEB订单'
        }
      ],
      operateOptions: [
        {
          label: '批量发货',
          value: 1
        },
        {
          label: '关闭订单',
          value: 2
        },
        {
          label: '删除订单',
          value: 3
        }
      ],
      logisticsDialogVisible: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    handleSearchList() {
      console.log(this.temp2.order + ' temp2 ' + this.temp2.order_source)
    },
    handleResetSearch() {
      this.temp2 = Object.assign({}, this.temp)
    },

    fetchData() {
      this.listLoading = true
      console.log('》' + this.temp2.order_status)
      // send request and recieve data from backend
      getOrderList(this.temp2).then(response => {
        this.list = response.data.items
        this.total = response.data.total
        // setTimeout(() => {
        //     this.listLoading = false  //停止旋转
        // }, 1.5 * 1000)
        this.listLoading = false // 停止旋转
      })
    },

    handleDelete(row, index) {
      this.list.splice(index, 1)
      this.$notify({
        title: 'Success',
        message: '删除该行',
        type: 'success',
        duration: 2000
      })
    },

    lookOrder($index, row) {
      this.$router.push({ path: '/order/orderDetails', query: { id: row.id }})
      // this.$router.replace('/order/orderDetails')
    },
    // confirm update data
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          // send upate request
          updateFormData(tempData).then(res => {
            // find index of data
            const index = this.list.findIndex(v => v.id === this.temp.id)
            this.list.splice(index, 1, this.temp)
            this.dialogVisible = false // 关闭对话框
            this.$notify({
              title: 'Success',
              message: 'update success',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    // create
    handleCreate() {
      // eslint-disable-next-line no-sequences
      this.restTemp(), // 置空
      this.dialogStatus = 'create',
      this.dialogVisible = true,
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
        // alert("回调函数 移除表单项的校验结果。")
      })
    },
    restTemp() {
      this.temp = {
        order: '',
        create_time: '',
        account: '',
        money: '',
        payment: '',
        order_source: '',
        order_status: '',
        dialogStatus: ''
      }
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.temp.id = parseInt(Math.random * 100) + 1024
          createStudent(this.temp).then(res => {
            // this.list.unshift(this.temp)
            this.list.push(this.temp)
            this.dialogVisible = false // 关闭对话框
            this.$notify({
              title: 'Success',
              message: 'create success',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    handleSearch() {
      this.listQuery.page = 1
      this.fetchData()
    }
  }
}
</script>

